<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>认识vm</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            总结：
                1.vm身上有很多以$开头的属性或方法，这些是给程序员用的（也不是全都用）
                2.vm身上有很多以_开头的属性或方法，这些是底层在用的（正常写功能不关心）
                3.data中配置的属性，也不知怎么了（到底咋回事，后面会说），最终都跑到了vm身上。
         -->
        <!-- 准备好一个容器-->
        <div id="demo">
            <h1>{{school}}欢迎你！</h1>
            <h2>测试1：{{a}}</h2>
            <h2>测试2：{{b}}</h2>
            <h2>测试3：{{c}}</h2>
            <h2>测试4：{{d}}</h2>
            <h2>测试5：{{_c}}</h2>
            <h2>测试6：{{$attrs}}</h2>
            <h2>测试7：{{toString}}</h2>
            <h2>测试8：{{e}}</h2>
        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            Object.prototype.e = 9
            let vm = new Vue({
                el:'#demo',
                data:{
                    school:'尚硅谷',
                    a:1,
                    b:2,
                    c:3,
                    d:[1,3,5,7,9],
                }
            })
            // 输出Vue实例对象 —— vm
            console.log(vm)
        </script>
    </body>
</html>